<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:conditionalComment&gt;</code> renders a conditional comment. Conditional 
			comments are an IE specific feature which enables the developer to (out)comment blocks of HTML depending on whether
			the client is using IE and if so even which version. They are often seen in combination with CSS stylesheets like so:
		</p>
		<pre class="prettyprint"><code class="lang-xhtml">
&lt;!--[if lte IE 7]&gt;
    &lt;link rel="stylesheet" href="ie6-ie7.css" /&gt;
&lt;![endif]--&gt;
		</code></pre>
		<p>
			However, Facelets renders the comment's contents HTML-escaped which makes it unusable.
		</p>
		<pre class="prettyprint"><code class="lang-xhtml">
&lt;!--[if lte IE 7]&amp;gt;
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;ie6-ie7.css&amp;quot; /&amp;gt;
&amp;lt;![endif]--&gt;
		</code></pre>
		<p>
			Also, if <code>javax.faces.FACELETS_SKIP_COMMENTS</code> context param is
			set to <code>true</code> then it will even not be rendered at all. You would need to workaround this with an ugly
			<code>&lt;h:outputText escape="false"&gt;</code>.
		</p>
		<pre class="prettyprint"><code class="lang-xhtml">
&lt;h:outputText 
    value="&amp;lt;!--[if lte IE 7]&amp;gt;&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;ie6-ie7.css&amp;quot; /&amp;gt;&amp;lt;![endif]--&amp;gt;"
    escape="false" /&gt;
		</code></pre>
		<p>
			This component is designed to solve this problem.
		</p>
		<pre class="prettyprint"><code class="lang-xhtml">
&lt;o:conditionalComment if="lte IE 7"&gt;
    &lt;link rel="stylesheet" href="ie6-ie7.css" /&gt;
&lt;/o:conditionalComment&gt;
		</code></pre>
		<p>
			Note that you cannot use this with <code>&lt;h:outputStylesheet&gt;</code> as it would implicitly be relocated as
			direct child of <code>&lt;h:head&gt;</code>.
		</p>
	</ui:define>

	<ui:define name="demo">
		<o:conditionalComment if="IE">
			<link rel="stylesheet" href="#{resource['layout:css/ie.css']}" />
		</o:conditionalComment>
		<p>
			Only if you're using IE9 or older, you should see a pinkish background on this page. 
			Support for conditional comments has been discontinued in IE10. 
			It will only work if the IE10 browser is configured to run in a specific browser mode, e.g. IE9 mode.
		</p>
	</ui:define>
</ui:composition>